<template>
	<el-dialog
		v-model="state.dialogVisible"
		destroy-on-close
		:title="state.ruleForm.sysUserId ? '编辑管理员' : '新增管理员'"
		width="80%"
		@close="methods.handleClose"
	>
		<el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-width="120px" class="demo-ruleForm" status-icon>
			<el-row gutter="20">
				<el-col :span="12">
					<el-form-item label="账号" prop="account">
						<el-input v-model="state.ruleForm.account" placeholder="请输入账号" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="昵称" prop="nickname">
						<el-input v-model="state.ruleForm.nickname" placeholder="请输入昵称" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row gutter="20">
				<el-col :span="12" v-if="!state.ruleForm.sysUserId">
					<el-form-item label="密码" prop="password">
						<el-input v-model="state.ruleForm.password" placeholder="请输入密码" />
					</el-form-item>
				</el-col>
				<el-col :span="12"> </el-col>
			</el-row>
			<el-row gutter="20">
				<el-form-item label="角色管理" prop="sysRoleId">
					<el-transfer
						:titles="['角色列表', '已选角色']"
						v-model="state.ruleForm.sysUserRoleList"
						:data="state.allRoleList"
						@change="methods.tranChange"
					/>
				</el-form-item>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="methods.handleClose">取消</el-button>
				<el-button type="primary" @click="methods.submit(ruleFormRef)"> 确认 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, inject, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import {allApiType} from "/src/api/api";
// import { permissionApiAll } from '/@/api/permission';

const ruleFormRef = ref<any>();
// const permissionApi = permissionApiAll();

const tools: any = inject('$tools');
const emit = defineEmits(['callback']);

const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {},
	rules: {
		account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
		nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
		password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
		sysUserPhone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
		sysRoleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
	},
	allRoleList: [],
});

const methods = {
	tranChange() {
		console.log(state.ruleForm.sysUserRoleList);
	},
	async submit(formEl: FormInstance | undefined) {
		state.ruleForm.sysRoleId = state.ruleForm.sysUserRoleList;
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				delete state.ruleForm.sysUserRoleList;
				state.ruleForm.sysRoleId = state.ruleForm.sysRoleId.toString();
				if (state.ruleForm.sysUserId) {
					allApiType('/admin/user/updateSysUserInfo', 'POST', state.ruleForm).then(() => {
						ElMessage.success('编辑成功');
						methods.handleClose();
						emit('callback');
					});
				} else {
					allApiType('/admin/user/createSysUserInfo', 'POST', state.ruleForm).then(() => {
						ElMessage.success('新增成功');
						methods.handleClose();
						emit('callback');
					});
				}
			} else {
				ElMessage.warning('请补全必填项');
			}
		});
	},

	init(row: any) {
		if (row) {
			state.ruleForm = row;
			state.ruleForm.sysUserRoleList = row.sysUserRoleList.map((item: any) => item.roleId);
		}
		allApiType('/admin/permission/findSysRoleList', 'GET', { pageIndex: 1, pageSize: 100 }).then((res: any) => {
			state.allRoleList = res.data.list;
			state.allRoleList.forEach((item: any) => {
				item.key = item.roleId;
				item.label = item.roleName;
			});
		});
		state.dialogVisible = true;
	},
	handleClose() {
		state.ruleForm = {};
		state.allRoleList = [];
		state.ruleForm.sysRoleId = '';
		ruleFormRef.value.clearValidate();
		state.dialogVisible = false;
	},
};
onMounted(() => {});

defineExpose({
	...methods,
});
</script>
<style scoped lang="scss">
.el-row {
	margin-bottom: 20px;
}

.avatar-uploader {
	width: 178px;
	height: 178px;
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
